<template>
	<view class="">
		<nav-bar title="地址编辑"></nav-bar>
		<van-address-edit :area-list="areaList" show-delete show-set-default show-search-result
			:search-result="searchResult" :area-columns-placeholder="['请选择', '请选择', '请选择']" @save="onSave"
			@delete="onDelete" @change-detail="onChangeDetail" />

	</view>
</template>

<script>
	import {
		ref
	} from 'vue';
	import {
		areaList
	} from '@vant/area-data';

	export default {
		setup() {
			const searchResult = ref([]);

			const onSave = () => showToast('save');
			const onDelete = () => showToast('delete');
			const onChangeDetail = (val) => {
				if (val) {
					searchResult.value = [{
						name: '黄龙万科中心',
						address: '杭州市西湖区',
					}, ];
				} else {
					searchResult.value = [];
				}
			};

			return {
				onSave,
				onDelete,
				areaList,
				searchResult,
				onChangeDetail,
			};
		},
	};
</script>

<style>
</style>
